<template>
  <div class="c-pay-way-group">
    <div class="c-pay-way-group__title">支付方式</div>
    <van-radio-group :value="value">
      <van-cell-group inset>
        <div
          v-for="item of formattedWays"
          :key="item.pay_way"
          class="pay-way-item"
        >
          <Huabei
            v-if="isHuabei(item.pay_way)"
            :info="item"
            :value="value"
            @change="onChange"
          ></Huabei>
          <VirtualIcon
            :value="value"
            v-else-if="isVirtualPayWay(item.pay_way)"
            :info="item"
            @change="onChange"
            @refreshBalance="$emit('refreshBalance')"
          ></VirtualIcon>
          <CommonPay
            v-else
            :info="item"
            :value="value"
            @change="onChange"
          ></CommonPay>
        </div>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>
<script>
import { RadioGroup, Radio, Cell, CellGroup } from "vant";
import CommonPay from "../../components/pay-way/common-pay";
import Huabei from "../../components/pay-way/huabei";
import VirtualIcon from "../../components/pay-way/virtual-coin/index.vue";
import locale from "../../mixins/locale";
import { PayWay, isVirtualPayWay } from "../../utils/pay-way";
import { getPayWayIcon } from "../../utils/pay-way-icon";
import { isIos } from '../../utils/check-env'

export default {
  mixins: [locale],
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: null,
    ways: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    CommonPay,
    Huabei,
    VirtualIcon,
  },
  computed: {
    formattedWays() {
      if (!this.ways) return [];

      const i18nNameMap = {
        微信支付: this.t("confirmOrder_wechat_pay"),
        支付宝: this.t("confirmOrder_ali_pay"),
        花呗分期: this.t("confirmOrder_huabei_pay"),
      };

      return this.ways?.map((item) => {
        console.debug('formattedWays: ', item.pay_way, getPayWayIcon(item.pay_way))
        return {
          ...item,
          name: i18nNameMap[item.name] || item.name,
          icon: item.icon || getPayWayIcon(item.pay_way),
          disabled: item.pay_enable === 2,
          showLimitTips: isIos && isVirtualPayWay(item) && this.ways?.length === 1
        };
      });
    },
  },
  data() {
    return {
      PayWay,
    };
  },
  methods: {
    isVirtualPayWay,
    isHuabei(way) {
      return PayWay.PayWayAliPayHB == way;
    },
    onChange(...value) {
      this.$emit("change", ...value);
    },
  },
};
</script>

<style lang="scss" scoped>
.c-pay-way-group {
  background-color: #fff;
  padding: 0.32rem;

  &__title {
    font-size: 0.28rem;
    color: #333333;
    font-weight: 500;
  }

  .pay-way-item {
    border-bottom: solid 0.5px #cccccc;

    &:last-child {
      border-bottom: none;
    }
  }

  ::v-deep.van-cell {
    padding: 0.28rem 0;
    font-size: 0.28rem;
    font-weight: 400;
    height: 1.12rem;
    overflow: visible;
    border-radius: 0.16rem 0 0;
    width: auto;

    &:after {
      display: none;
    }

    .van-radio {
      overflow: visible;
    }
  }

  .van-cell-group--inset {
    overflow: visible;
  }

  .van-cell-group {
    margin: 0;
    border-radius: 0.16rem;
    &::after {
      display: none;
    }
  }
}
</style>
